<template>
  <el-time-picker
    style="width: 100%"
    v-bind="$attrs"
    v-model="state.paramVal"
    clearable
    :placeholder="
      (typeof $attrs.disabled !== 'undefined' && $attrs.disabled !== false) ||
      state.formView
        ? ''
        : $attrs.placeholder
          ? $attrs.placeholder
          : `请选择${label}`
    "
    :valueFormat="valueFormat"
    :format="format"
    :disabled="isValue($attrs.disabled) ? $attrs.disabled : state.formView"
  >
    <template #default="cell">
      <slot name="default" :cell="cell"></slot>
    </template>
  </el-time-picker>
</template>

<script setup lang="ts">
import { reactive, watch, inject } from 'vue'
import { isValue } from '@/utils/czr-util'
const emit = defineEmits(['emitParam'])
const props = defineProps({
  param: {},
  label: {},
  format: { type: String, default: 'HH:mm:ss' },
  valueFormat: { type: String, default: 'HH:mm:ss' },
})
const state = reactive({
  paramVal: props.param,
  formView: inject('form-view', false),
})
watch(
  () => state.paramVal,
  (n) => {
    emit('emitParam', n)
  },
)
watch(
  () => props.param,
  (n) => {
    state.paramVal = n
  },
)
</script>

<style scoped lang="scss"></style>
